<template>
	<view class="add-address">
		<u-navbar title="新增收货地址" bgColor="#fff" :autoBack="true">
		</u-navbar>
		<view class="top">
			<view class="form-box-address">
				<view class="item-li">
					<span class="label">收货人</span>
					<view class="right">
						<input class="ipt" placeholder="请输入收货人姓名" type="text" v-model="addressInfo.name" />
					</view>
				</view>
				<view class="item-li">
					<span class="label">手机号码</span>
					<view class="right">
						<input class="ipt" placeholder="请输入手机号码" type="text" v-model="addressInfo.mobile" />
					</view>
				</view>
				<view class="item-li">
					<span class="label">所在地区</span>
					<view class="right">
						<input style="border:0" class="ipt" placeholder="选择所在地区" type="text" v-model="addressName"
							@tap="visible = true" disabled />
						<u-icon slot="right" name="arrow-right" size="14" @click="visible = true"></u-icon>
					</view>

				</view>
				<view class="item-li">
					<span class="label">详细地址</span>
					<view class="right">
						<input class="ipt" placeholder="小区楼栋、门牌号" type="text" v-model="addressInfo.info" />
					</view>
				</view>

				<view class="distinguish-box">
					<u--textarea placeholderClass="distinguish-text" class="distinguish-text" v-model="distinguish"
						placeholder="粘贴整段文字，自动识别地址，姓名，电话" border="none" height="224rpx"></u--textarea>
					<view class="btn">
						<view class="eliminate" @click="distinguish = ''">清除</view>
						<view class="distinguish" @click="distinguishClick">识别</view>
					</view>
				</view>

			</view>

			<view class="form-box-address">
				<view class="item-li">
					<span class="label">设置为默认地址</span>
					<view class="right">
						<u-switch v-model="addressInfo.isDefault" size="20" activeColor="#34DFA3" @change="switchChange"
							:activeValue="0" :inactiveValue="1"></u-switch>
					</view>
				</view>
			</view>
		</view>

		<view class="footer">
			<!-- u-button @click="confirmAdd()" shape="circle" type="error" text="确 认"></u-button> -->
			<view class="conFirm" @click="confirmAdd()">
				确 认
			</view>
		</view>
		<cityPicker v-if="visible" :defaultValue="defaultValue" :visible="visible" :maskCloseAble="maskCloseAble"
			@cancel="cancel" @confirm="confirm"></cityPicker>
	</view>
</template>

<script>
	import cityPicker from '@/components/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker.vue'

	import {
		AddressParse
	} from '@/uni_modules/Winglau14-address-auto-parse/components/Winglau14-address-auto-parse/lib/addressParseBundle.js';

	// import {
	// 	doGetLocation
	// } from '@/static/utils/getLocation.js';

	import {
		addAddress,
		putAddress,
		getAddressInfo,
		analysisAddress
	} from '@/api/api.js'
	export default {
		components: {
			cityPicker
		},
		data() {
			return {
				title: '新增地址',
				editId: '',
				value: '',
				address: '',
				distinguish: '', // 识别
				pasteAddress: false, // 识别
				addressInfo: {
					name: '',
					mobile: '',
					province: '',
					city: '',
					county: '',
					info: '',
					userId: uni.getStorageSync('userInfo').id,
					isDefault: 1,
				},
				addressName: '',
				defaultValue: '',
				column: 3,
				visible: false,
				maskCloseAble: true,
			};
		},
		onLoad(op) {
			console.log(op);
			if (op.id) {
				this.editId = op.id
				uni.setNavigationBarTitle({
					title: '修改地址'
				})
			}
		},
		onShow() {
			if (this.editId) {
				this.getDetail()
			}
		},

		methods: {
			switchChange(val) {

			},


			// 识别地址
			distinguishClick() {
				analysisAddress({
					addressStr: this.distinguish
				}).then(res => {
					if (res.code == 200) {
						this.addressInfo = res.data
						this.addressInfo.info = res.data.address
						this.addressName = res.data.province + res.data.city + res.data.county
					}
				})
			},

			getDetail() {
				getAddressInfo(this.editId).then(res => {
					if (res.code == 200) {
						this.addressInfo = res.data
						this.addressInfo.info = res.data.detailedAddress
						this.addressName = res.data.province + res.data.city + res.data.district
					}
				})
			},
			cancel() {
				this.visible = false
			},

			confirm(val) {
				console.log(val);
				this.addressInfo.province = val.provinceName
				this.addressInfo.city = val.cityName
				this.addressInfo.county = val.areaName
				this.addressName = val.name
				this.visible = false
			},
			confirmAdd() {
				console.log(this.addressInfo);
				uni.showLoading({
					title: '请稍候...',
					mask: true
				})
				if (this.editId) {
					putAddress({
						"id": this.editId,
						"appUserId": uni.getStorageSync('userInfo').id,
						"province": this.addressInfo.province, //省份
						"city": this.addressInfo.city, //城市
						"district": this.addressInfo.county, //区域
						"detailedAddress": this.addressInfo.info,
						"isDefault": this.addressInfo.isDefault,
						"mobile": this.addressInfo.mobile, // 手机号
						"proCityArea": this.addressInfo.county, //区
						"name": this.addressInfo.name
					}).then(res => {
						uni.hideLoading()
						if (res.code == 200) {
							uni.$u.toast('修改成功')
							setTimeout(function() {
								uni.navigateBack()
							}, 1500);
						}
					})
				} else {
					addAddress({
						"appUserId": uni.getStorageSync('userInfo').id,
						"province": this.addressInfo.province, //省份
						"city": this.addressInfo.city, //城市
						"district": this.addressInfo.county, //区域
						"detailedAddress": this.addressInfo.info,
						"isDefault": this.addressInfo.isDefault,
						"mobile": this.addressInfo.mobile, // 手机号
						"proCityArea": this.addressInfo.county, //区
						"name": this.addressInfo.name
					}).then(res => {
						uni.hideLoading()
						if (res.code == 200) {
							uni.$u.toast('添加成功')
							setTimeout(function() {
								uni.navigateBack()
							}, 1500);
						}
					})
				}
			},
			back() {
				uni.navigateBack()
			},
			getLocation() {
				doGetLocation((data) => {
					console.log(data);
				})
			},
			autoParse() {
				if (!this.address) {
					return uni.showToast({
						title: '请粘贴您需要识别的地址',
						icon: 'none'
					})
				}
				const address = this.address
				const result = AddressParse.parse(address)
				if (result && result.length) {
					let html = ''
					for (let key in result[0]) {
						if (result[0][key]) {
							html += key + `:` + result[0][key] + `<br/>`
						}
					}
					console.log(result[0]);
					// 赋值
					this.addressInfo.name = result[0].name
					this.addressInfo.mobile = result[0].mobile
					this.addressInfo.province = result[0].province
					this.addressInfo.city = result[0].city
					this.addressInfo.county = result[0].area
					this.addressName = result[0].province + result[0].city + result[0].area
					this.addressInfo.address = result[0].details
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.add-address {
		padding: 180rpx 0rpx 158rpx;
		min-height: 100vh;
		box-sizing: border-box;
		background-color: #F6F6F6;

		.top {
			padding: 28rpx;
			box-sizing: border-box;

			.form-box-address {
				width: 100%;
				border-radius: 16rpx;
				opacity: 1;
				background: #ffffff;
				padding: 28rpx;
				box-sizing: border-box;
				margin-bottom: 28rpx;


				.item-li {
					border: 0;
					// margin-bottom: 82rpx;
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: flex-start;

					.label {
						min-width: 140rpx;
						color: #000000;
						line-height: 27rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						color: #333333;
						text-align: left;
						font-size: 28rpx;
						font-weight: 300;
						font-family: "Alibaba PuHuiTi 2.0";
					}

					.right {
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: flex-end;
					}

					.ipt {
						width: 100%;
						text-align: left;
						font-style: normal;
						text-transform: none;
						text-align: left;
						color: #333333;
						text-align: left;
						font-size: 28rpx;
						font-weight: 500;
						font-family: "Alibaba PuHuiTi 2.0";
					}

					.border {
						border-bottom: 1rpx solid #F2F2F2;
					}
				}

				.distinguish-box {
					margin-top: 40rpx;
					position: relative;

					.pasteAddress {
						display: flex;
						align-items: center;
						justify-content: center;
						font-family: HarmonyOS_Sans_SC_Light;
						font-size: 25rpx;
						color: #343434;
						font-style: normal;
						text-transform: none;

						.text {
							margin-right: 15rpx;
						}
					}

					.putItAway {
						display: flex;
						align-items: center;
						justify-content: center;
						font-family: HarmonyOS_Sans_SC_Light;
						font-size: 25rpx;
						color: #343434;
						font-style: normal;
						text-transform: none;
						margin-top: 20rpx;

						.text {
							margin-right: 15rpx;
						}
					}

					.u-textarea {
						border-radius: 16rpx;
						opacity: 1;
						background: #f4f4f4;
					}

					::v-deep .distinguish-text {
						padding: 30rpx !important;
						background-color: #F7F7F7 !important;
						font-family: HarmonyOS_Sans_SC_Light;
						font-size: 26rpx !important;
						color: #9D9D9D !important;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}

					::v-deep .u-textarea__field {
						font-size: 26rpx !important;
						color: #131212 !important;
						font-style: normal !important;
						text-transform: none !important;
						font-weight: normal !important;
					}

					.btn {
						position: absolute;
						bottom: 20rpx;
						right: 25rpx;
						z-index: 999;
						display: flex;
						align-items: center;
						justify-content: flex-end;

						.eliminate {
							width: 95rpx;
							height: 40rpx;
							font-family: HarmonyOS_Sans_SC_Light;
							font-size: 28rpx;
							color: #000000;
							line-height: 40rpx;
							text-align: center;
							font-style: normal;
							text-transform: none;
							margin-right: 40rpx;
						}

						.distinguish {
							width: 154rpx;
							height: 46rpx;
							border-radius: 166rpx;
							opacity: 1;
							font-size: 28rpx;
							color: #34DFA3;
							line-height: 46rpx;
							text-align: center;
							font-style: normal;
							text-transform: none;
							border: 1rpx solid #34DFA3;
						}
					}
				}
			}

		}

		.footer {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 146rpx;
			display: flex;
			align-items: center;
			background-color: #fff;

			.conFirm {
				margin: auto;
				width: 694rpx;
				height: 92rpx;
				line-height: 92rpx;
				border-radius: 438rpx;
				opacity: 1;
				background: linear-gradient(-49.9deg, #00bf39 0%, #34dfa3 100%);
				color: #ffffff;
				text-align: center;
				font-size: 32rpx;
				font-weight: 500;
			}

			.u-button {
				width: 80%;
				background: linear-gradient(-49.9deg, #00bf39 0%, #34dfa3 100%);
				border-radius: 16rpx;
			}
		}

		.form-box {
			.right {
				display: flex;
				align-items: center;
			}
		}
	}
</style>